<template>
  <view class="content">
    <view
      class="header"
      :style="{
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        height: '320rpx',
      }"
    >
      <view class="user-section">
        <view class="user-info">
          <view class="avatar-box">
            <image
              :src="
                _imgUrl + user.avatar || '/static/center/default-avatar.png'
              "
              class="avatar"
            >
            </image>
            <view class="online-dot"></view>
          </view>
          <view class="info">
            <text class="username">{{ user.userName || "未设置昵称" }}</text>
            <text
              class="role-tag"
              >{{ role == 'nonghu'?'农户': role=='yonghu'?'用户':'卖家' }}</text
            >
          </view>
        </view>
        <view class="setting" @tap="onPageTap('../user-info/user-info')">
          <view
            class="cuIcon-settings"
            style="color: #fff; font-size: 40rpx"
          ></view>
        </view>
      </view>
    </view>

    <view class="menu-card">
      <view v-for="item in menuList" :key="item.tableName" class="menu-group">
        <view
          v-if="role == item.tableName"
          v-for="(menu, index) in item.backMenu"
          :key="index"
        >
          <view v-for="(child, sort) in menu.child" :key="sort">
            <view
              v-if="
                child.tableName != 'yifahuodingdan' &&
                child.tableName != 'yituikuandingdan' &&
                child.tableName != 'yiquxiaodingdan' &&
                child.tableName != 'weizhifudingdan' &&
                child.tableName != 'yizhifudingdan' &&
                child.tableName != 'yiwanchengdingdan'
              "
              class="menu-item"
              @tap="
                onPageTap(
                  '../' + child.tableName + '/list?userid=' + user.userId
                )
              "
            >
              <text class="menu-text">{{ child.menu }}</text>
              <view class="cuIcon-right" style="color: #667eea"></view>
            </view>
          </view>
        </view>
      </view>
      <!-- <view v-for="item in menuList" :key="item.roleName" class="menu-group">
				<view v-if="role==item.roleName" v-for="(menu,index) in item.backMenu" :key="index">
					<view v-for="(child,sort) in menu.child" :key="sort">
						<view v-if="child.tableName!='yifahuodingdan' && child.tableName!='yituikuandingdan'
							&&child.tableName!='yiquxiaodingdan' && child.tableName!='weizhifudingdan' &&
							child.tableName!='yizhifudingdan' && child.tableName!='yiwanchengdingdan' " class=" menu-item"
							@tap="onPageTap('../'+child.tableName+'/list?userid='+user.id)">
							<text class="menu-text">{{child.menu}}</text>
							<view class="cuIcon-right" style="color: #667eea;"></view>
						</view>
					</view>
				</view>
			</view> -->
    </view>
  </view>
</template>
<script>
import menu from "@/utils/menu";
export default {
  data() {
    return {
      isH5Plus: true,
      user: {},
      tableName: "",
      role: "",
      menuList: [],
      _imgUrl: "",
      userInfo: {},
    };
  },
  async onLoad() {
    this.role = uni.getStorageSync("roles");
    let table = uni.getStorageSync("nowTable");
    // let res = await this.$api.session(table);
    this.user = uni.getStorageSync("userInfo");
    this.tableName = table;
    let menus = menu.list();
    this.menuList = menus;
  },
  async onShow() {
	  const curPages = getCurrentPages()[0]; // 获取当前页面实例
	  if (typeof curPages.getTabBar === "function" && curPages.getTabBar()) {
	    curPages.getTabBar().setData({
	      selected: 2,
	    });
	  }
    this._imgUrl = this.$base.url;
    this.role = uni.getStorageSync("roles");
    let table = uni.getStorageSync("nowTable");
    // let res = await this.$api.session(table);
    this.user = uni.getStorageSync("userInfo");
    this.tableName = table;
    let menus = menu.list();
    this.menuList = menus;
    console.log(this.menuList);
    this.getUserInfo();
  },
  methods: {
    onPageTap(url) {
      uni.navigateTo({
        url: url,
        fail: function () {
          uni.switchTab({
            url: url,
          });
        },
      });
    },
    async getUserInfo() {
      try {
        let res = await this.$api.info(
          "user",
          uni.getStorageSync("userInfo").userId
        );
        if (res.code == 200) {
          uni.setStorageSync("userInfo", res.data);
		  this.user =res.data
        }
      } catch (error) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss">
page {
  background: linear-gradient(15deg, #f8f9ff 0%, #f1f3fe 100%);
}

.header {
  padding: 40rpx 32rpx;
  border-radius: 0 0 80rpx 80rpx;
  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.2);

  .user-section {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .user-info {
      display: flex;
      align-items: center;

      .avatar-box {
        position: relative;
        margin-right: 24rpx;

        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
          border: 4rpx solid rgba(255, 255, 255, 0.2);
        }

        .online-dot {
          position: absolute;
          right: 8rpx;
          bottom: 8rpx;
          width: 24rpx;
          height: 24rpx;
          background: #4cd964;
          border: 2rpx solid #fff;
          border-radius: 50%;
        }
      }

      .info {
        .username {
          font-size: 36rpx;
          color: #fff;
          font-weight: 600;
          text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        }

        .role-tag {
          display: block;
          padding: 4rpx 16rpx;
          background: rgba(255, 255, 255, 0.2);
          border-radius: 40rpx;
          font-size: 24rpx;
          color: #fff;
          margin-top: 8rpx;
        }
      }
    }
  }
}

.menu-card {
  margin: 40rpx 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.1);
  padding: 0 32rpx;

  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f1f3fe;
    transition: all 0.3s ease;

    &:active {
      transform: translateX(10rpx);
    }

    &:last-child {
      border-bottom: none;
    }

    .menu-text {
      font-size: 30rpx;
      color: #2d3748;
      font-weight: 500;
    }

    .cuIcon-right {
      font-size: 32rpx;
    }
  }
}
</style>
